Hay muchas formas de añadir una imagen en la cabecera del blog, de todas esta es la que me ha dado mejor resultado y al mismo tiempo requiere menos cambios en la plantilla.

Nos situamos en Plantilla/Edición HTML una vez allí donde dice:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Cambiamos el valor border:1px de header-wrapper y header a border: 0px

Más abajo a continuación de:
<div id='outer-wrapper'><div id='wrap2'> añadiremos lo siguiente:

<div id='header'>
<a href=' aquí-la-url-de-tu-página'><img border='0' height='190' src=" aquí-la-url-de-tu-imagen" width='670'/></a>
</div>

Podéis cambiar los valores width y height para ajustar el tamaño de la imagen.

Si a nuestra imagen le añadimos el título podemos eliminar el que por defecto aparece en el blog, para hacerlo sencillamente debemos buscar algo así:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
visibility:hidden; display:none;
}

Y añadimos lo señalado en negrita, con eso es suficiente.


Noa-

Siempre al quite de cualquier cosa que nos pueda servir.

Besotes y mil gracias por todas las palabras de apoyo y ánimos

Responder
Gem@

Gracias a ti noa- por estar aquí, y por escribir tanta maravilla.

Responder
Gorka Repáraz

Hola gema, ya puse la imagen como header del blog gracias a ti. Pero me queda una duda. Como puedo poner el link?? Si hago lo que me dices en este post me aparecen dos header!!!!

Bueno, quiero felicitarte, porque lo que haces no tiene precio.

Saludos.

p.d. por si quieres ver la pagina y sacar conclusiones es: entrenadordeporteros.blogspot.com.

gracias

Responder
Gem@

Hola Gorka: Es que no se debe aplicar las dos formas, o es una que no actualiza el blog o es otra que si lo actualiza.
Como para añadir la imagen no has suprimido nada ahora unicamente debes suprimir el código que añadiste anteriormente, y añadir el que actualiza la página.
He visitado tu blog, tienes una entrada donde das el código para que te enlacen, quizás olvidaste que tienes inhabilitado el botón derecho por lo tanto no pueden copiar el código, y además... tampoco pueden hacerlo si lo pones en una imagen.
He posteado sobre eso ayer mismo, quizás te sea de ayuda. espero que si :)

Responder
Gorka Repáraz

Hola, gracias por la respuesta, pero lo e puesto en una imagen para que copien la ruta, porque si ponía los códigos se me convertía el html, por lo que nunca puedo poner el código html porque no se me queda en 'bruto'.

Lo del link, no se que parte del html debo borrar para poner el nuevo

Responder
Gem@

Hola Gorka: Ya me supuse que era por eso, pero no pasaría si metieras el código en un textarea (una cajita para copiar el código)
En esta entrada explico como hacerlo.

clica aquí


De todas formas cuando desees que un código no se convierta en el resultado de lo que deseas poner sino que salga el código tal y como deseas que lo visionen debes convertirlo, aquí te dejo una página que yo utilizo mucho:
http://chuano.net/chuano/util/convsimbolos.php
Espero te sea útil.

Responder
Anónimo

Muchas gracias, ya he visitado la pagina y me ha sido util.

Lo que haces en esta pagina no tiene precio, muchas gracias de nuevo ;-)

Responder
Gem@

Gracias :)

Responder
Ángel G Ropero

que hago despues de cambiar los codigos?
como subo la imagen?

gracias.

Responder
Gem@

Saludos Trakatrans SSJ3 puedes subirla a http://www.imageshack.us/ copias la Url que te genera y luego en el código donde dice aquí-la-url-de-tu-página la pegas.

Responder
Ángel G Ropero

gracias, lo de subir fotos a internet lo sabia. pero donde esta es codigo?

Responder
Gem@

En esta misma entrada Trakatrans SSJ3 , en el post que se titula ´´Imagen-Logo que actualiza la página al mismo tiempo(Blogger beta)(Muy bueno)``

Responder
Ángel G Ropero

ya lo he conseguido muchas gracias por el pedazo traabajo que has hecho buscando esto.

agur

Responder
Gem@

Htacias Trakatrans SSJ3 me alegra que haya resultado ;)

Responder
Unknown

AUXILIOOOO.... gem@. me ha ocurrido un desastre, a ver qué ha podido pasar, si tienes alguna idea:
he querido reemplazar la imagen que hace de cabecera en para niños con cabeza http://paraninosconcabeza.blogspot.com. por una imagen igual en tamaño pero navideña- ahora en lugar de la imagen en su tamaño normal, blogger me la estira hasta abarcar todo el ancho... da igual si es la imagen que había antes como si es la nueva.
¿cómo lo puedo arreglar? ai, ai, ai... (mientras he puesto una imagen, pero no en la cabecera... sino como artilugio)

Responder
Antonieta H.

Hola gema...ando por aquí porque ayer le cambie la cabecera a mi blog, y le había comentado la duda pero porsi las dudas he venido por aquí a ver si encuentro solucionarlo ...

lo que explicas en la entrada era lo que queria hacer :( pero no me funciona

Responder
Antonieta H.

yo soy otra vez por aquí (ahh por cierto soy bluesoul) yo añadí una imagen a mi cabecera así

#header-wrapper {
margin:0 auto 0px;
background-color:#6495ed;
border:1px solid #6AA8EE;
height:200px;
background-image:url(http://i164.photobucket.com/albums/u26/antonieta7/Sinttulo-1-1.png);

y lo que quiero es que al pinchar en la imagen vaya al home, pensé que lo lograría con esto que explicas pero me salio dos veces la cabecera y una mas chica que la otra :(

Saludos

Responder
Gem@

Antonieta que no te conocía :O
Esto que ves en la entrada ahora no es necesario porque subiendo la imagen con el gadget de cabecera ya es suficiente, quiero decir que actualiza la página.

Responder
Antonieta H.

si jajaja lo he intentado con las dos maneras pero al subir la imagen con el gadget siempre me queda mal centrada o muy angosta o fuera de los bordes :S las medidas de la imagen son 923 x 200, lo he intentando de las dos maneras y nada...ahh y también he marcado la opción ajustar al ancho de la cabecera en el gadget

Responder
Antonieta H.

por eso intentaba desde el código porque ahí si quedaba centrada y bonita :( pero no lleva al link :(

Responder
Gem@

Pues yo he probado en un blog con el código que tenías hace unos momentos y si hace enlace, ahora no porque la añadiste a la css.

Responder
Antonieta H.

antes estaba intentando lo que explicas en esta entrada y después como no me funcionaba volví a cargar una plantilla que tenia guardada ...será que borro todo y empiezo de nuevo?:S es que ya lo he hecho jajaja creo que me olvidare de cabeceras jajaja

Responder
Antonieta H.

voy a probar de nuevo cargándola desde el gadget y perdón tanta indecisión jajaja

Responder
Gem@

No hay nada que perdonar Antonieta ;)

Responder
Antonieta H.

hola :) al final lo logre hacer con esta ayuda y con ayuda de rosa jajajaa...que cabezona siempre necesito ayuda de varias :( hahahahaha

saludos

Responder
Gem@

Hola Antonieta H. no sé qué harías porque ya te digo que con tu imagen funcionaba bien. Pero me alegra que esté como deseas :)

Responder
Antonieta H.

Yo tampoco se que hice jajaja pero funciono como dice Jmiur "si funciona no lo toques" jajajaja

Responder
Gem@

Y tiene mucha razón ;)

Responder
Anónimo

me queda mucho espacio entre la imagen y la entrada que hago? :(

Responder
Gem@

yz No veo las entradas Manuel :O

Responder
Mauricio

Hola Gema, para poner el nombre de mi blog en la imagen de cabecera que sea diseñado por mi, como tengo que hacerlo ???.Gracias guapa por tu respuesta.

Responder
Gem@

:: Mauricio simplemente subiendo la imagen desde la plantilla de diseño en el gadget de cabecera :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top